<template>
      <div class="content-box">
        <div class="serchBox clearfix">
            <div class="u_mb_10">
                <el-button type="primary" @click="addUser()">新增咨询师</el-button>
                <el-button type="primary" @click="updateTips()">手动更新标签</el-button>
            </div>
            <easyForm :fieldList="fieldList" :model="model" :options="options" @submit="search" @reset="reset">
                <!-- <template #buttons="{ model , formRef }">
                        <el-button type="primary" @click="search(model,formRef)">搜索</el-button>
                        <el-button  @click="reset(model,formRef)">重置</el-button>
                </template> -->
            </easyForm>
        </div>
        <div class="containerBox">
            <el-table :data="tableData" border :header-cell-style="{background:'#eef1f6',color:'#606266'}" >
                <el-table-column
                    align="center"
                    :prop="item.name"
                    :label="item.label"
                    v-for="(item, index) in tableHeader"
                    :key="index"
                    :fixed="item.fixed"
                    :width="item.width"
                    :type="item.type"
                    :min-width="item.minWidth"
                >   

                    <!-- 调整排序增加tooltip-->
                    <template #header  v-if="item.tooltip" style="text-align:center">
                        {{item.label}} 
                        <el-popover
                            placement="top-start"
                            v-if="item.tooltip" 
                            :title="item.popoverTitle"
                            :width="200"
                            trigger="hover"
                            :content="item.tooltip"
                        >
                            <template #reference>
                            <el-icon  color="#409EFC" size="18"><QuestionFilled /></el-icon>
                            </template>
                        </el-popover>
                    </template>
                    <!-- 调整排序列重构 -->
                    <template #default="scope" v-if="item.inputs" style="text-align:center">
                        <div style="display: flex; align-items: center">
                            <el-input 
                                v-model="scope.row.inputs" 
                                style="width: 50px" 
                                v-if="scope.row.editFlag" 
                                @change="commitInputs(scope.$index, scope.row)"
                            />
                            <span class="u_mr_10 u_ml_10 marginauto" v-else>{{scope.row.inputs}}</span>
                            <el-button class="marginauto"  link type="primary" v-if="!scope.row.editFlag" @click="scope.row.editFlag = true">修改</el-button>
                            <el-button class="marginauto"  link type="primary" v-if="scope.row.editFlag"  @click="commitInputs(scope.$index, scope.row)">保存</el-button>
                            <el-checkbox v-model="scope.row.topFlag" label="置顶" @click="topClick(scope.$index, scope.row)"/>
                        </div>
                    </template>
                    <!-- 备注列重构 -->
                    <template #default="scope" v-if="item.remarks">
                        <div style="display: flex; align-items: center"  @click="scope.row.editRemarkFlag = true">
                            <el-input 
                                v-model="scope.row.remarks" 
                                v-if="scope.row.editRemarkFlag" 
                                maxlength="12" 
                                show-word-limit 
                                @blur="commitremarks(scope.$index, scope.row)" 
                                @change="commitremarks(scope.$index, scope.row)"
                            />
                            <el-button class="marginauto"  link type="primary" v-if="!scope.row.editRemarkFlag && !scope.row.remarks">备注</el-button>
                            <span class="u_mr_10 u_ml_10" v-else>{{scope.row.remarks}}</span>
                        </div>
                    </template>
                    <!-- 是否显示咨询师列重构 -->
                    <template #default="scope" v-if="item.doctor">
                        <div style="display: flex; align-items: center" >
                            <el-switch v-model="scope.row.doctorIsShow" class="marginauto"  />
                        </div>
                    </template>
                    <!-- 是否接收新来访者列重构 -->
                    <template #default="scope" v-if="item.newPeople">
                        <div style="display: flex; align-items: center" >
                            <el-switch v-model="scope.row.acceptNewPeople" class="marginauto" />
                        </div>
                    </template>

                    
                </el-table-column>
                
                <el-table-column label="操作" width="340" fixed="right" align="center">
                    <template #default="scope">
                        <el-button  link type="primary" @click="handleEdit(scope.$index, scope.row)">修改资料</el-button>
                        <el-button  link type="primary" @click="handleEdit(scope.$index, scope.row)">设置咨询服务</el-button>
                        <el-button  link type="primary" @click="unbinding(scope.$index, scope.row)">解绑</el-button>
                        <el-button  link type="primary" @click="caseManage(scope.$index, scope.row)">个案管理</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page_box">
                <v-pagination :pagesize="query.limit"
                    :total="pageTotal"
                    :options="query"
                    :render="getData">
	            </v-pagination>
            </div>
        </div>
      </div>
</template>

<script lang="ts" setup>
import { ref , reactive} from 'vue'
import { ElButton, ElCheckbox, ElIcon, ElInput, ElMessage, ElMessageBox, ElPopover, ElSwitch, ElTable, ElTableColumn, FormInstance } from 'element-plus'
import easyForm from '@/components/formItem/index.vue'
import vPagination from '@/components/pagenation/index.vue'
import { QuestionFilled } from '@element-plus/icons';

import { useRouter } from "vue-router";
import {useStore} from "vuex";



const router = useRouter();
const store = useStore();
const formList = {
    base: [
        { label: '注册手机号', field: 'date', },
        { label: '咨询师', field: 'type', type:"select",
            options: { data: [{ label: '全部用户', value: 1 }, 
            { label: '下单用户', value: 2 }] } },
        { label: '是否显示', field: 'style', type:"select",
            options: { data: [{ label: '', value: ''},
            { label: '隐藏', value: 1 },
            { label: '开启', value: 2 }, ] } },
        { label: '是否接受新来访者', field: 'from', type:"select",
            options: { data: [{ label: '', value: ''},
            { label: '接受', value: 1 }, 
            { label: '不接受', value: 2 }, ] } },

    ],
}
const fieldList: Form.FieldItem[] = formList.base;

const options = {
    labelPosition: 'right',
    disabled: false,
    submitButtonText: '搜索',
    resetButtonText: '重置',
    downloadButtonText: '导出',
    showResetButton: true,
    showDownloadButton: true,
    showSubmitButton:true,
};
// 搜索参数配置 使用form组件
const model = ref<Record<string, any>>({
        inlineFlag: true,
        size:'small',
        count: '',
        content: '',
        date:''
    })
// 表格内容
let tableLayout = ref('fixed')
let tableHeader = ref([
    {
        type: 'index',
        label:'序号',
        width: 60,
        fixed: 'left'
    },
    {
        label:"调整排序",
        width: 200,
        name:"name",
        tooltip: '数字越大表示权重越高，排在前面,相同数字则先添加的咨询师排在后面',
        inputs: true
        
    },
    {
        label:"咨询师类型",
        width: 100,
        name:"name"
    },
    {
        label:"咨询师姓名",
        width: 120,
        name:"time"
    },
    {
        label:"备注信息",
        name:"content",
        width: 300,
        remarks: true
    },
    {
        label:"咨询师ID",
        name:"content",
        width: 120
    },
    {
        label:"注册手机号",
        name:"content",
        width: 120
    },
    {
        label:"性别",
        name:"content",
        width: 120
    },
    {
        label:"个案总数",
        name:"content",
        width: 120
    },
    {
        label:"进行中个案",
        name:"content",
        width: 120
    },
    {
        label:"添加时间",
        name:"content",
        minWidth: 130
    },
    {
        label:"待咨询预约单数量",
        name:"content",
        width: 150
    },
    {
        label:"已咨询预约单数量",
        name:"content",
        width: 150
    },
    {
        label:"咨询师平均满意度",
        name:"content",
        width: 150
    },
    {
        label:"是否显示咨询师",
        name:"content",
        minWidth: 180,
        doctor: true
    },
    {
        label:"是否接受新来访者",
        name:"content",
        minWidth: 180,
        newPeople: true
    }

]);
let tableData = ref([{
        name: '张三',
        time: 'aa',
        content: 'bb',
        inputs:1,
        editFlag: false,
        topFlag: false,
        doctorIsShow: false,
        acceptNewPeople: false
      }, {
        name: '李四',
        content: '222',
        time: 'err',
        inputs:1,
        editFlag: false,
        topFlag: false,
        doctorIsShow: true,
        acceptNewPeople: false
      }, {
        name: '王五',
        content: '2',
        time: 'err',
        inputs:1,
        editFlag: false,
        topFlag: false,
        doctorIsShow: true,
        acceptNewPeople: true
      }]);
// 分页数据
const  pageTotal = ref(6),//总条数
    query = reactive({//配置对应的查询参数
        appTimeStart:'',
        appTimeEnd:'',
        page: 1,
        limit:10,//page第几页,limit是一页几个
    });
// 搜索按钮
let search = (searchCon: any,formRef: any) => {
    console.log(searchCon)
    console.log(formRef)
}
// 重置按钮
const reset = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
// 新增
const addUser = () => {
    let tagsItem = {
        "component": () => import("@/views/dataMana/addConsultant.vue"),
            "path": "/addConsultant",
            "name":"addConsultant",
            "meta":{
                "icon": "Monitor",
                "name": "新增咨询师",
            },
    }
    router.push({name: 'addConsultant',query: { id:0 }});
    store.dispatch("ADD_TAG", tagsItem)
    
}
// 手动更新标签
const updateTips = () => {

}
// 获取详情
const getData = () => {

}
//
const handleEdit = (index:number, row:any) => {

}
// 个案管理
const caseManage = (index:number, row: any) => {
    let tagsItem = {
        "component": () => import("@/views/dataMana/caseManage.vue"),
            "path": "/caseManage",
            "name":"caseManage",
            "meta":{
                "icon": "Monitor",
                "name": "个案管理" ,
                "id": row.id
            },
    }
    router.push({name: 'caseManage',query:{id:row.id}});
    store.dispatch("ADD_TAG", tagsItem)
}
// 保存编辑排序
const commitInputs = (index:number, row:any) => {
    row.editFlag = false;
    console.log(row)
}
// 置顶
const topClick = (index:number, row:any) => {
    // row.topFlag = !row.topFlag;
    console.log(row)
}
// 保存编辑remarks
const commitremarks = (index:number, row:any) => {
    row.editRemarkFlag = false;
    console.log(row)
}
// 解绑
const unbinding = (index:number, row:any) => {
    ElMessageBox.confirm(
    '解绑咨询师后，会将咨询师下的服务一起删除，再次添加需要重新绑定，确定解绑吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      
    })
}
</script>
<style scoped lang="scss">
.containerBox{
    width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 10px;
    // padding: 10px;
    border-radius: 4px;
    border: 1px solid #efefef;
    box-shadow: 0 0 10px #999!important;

}
</style>